<!--
 * @Author: hu_binbin
 * @Date: 2021-06-23 16:53:22
 * @LastEditTime: 2021-07-28 21:07:49
 * @Description: 选择设备类型
-->

<template>
    <div class="selectSubstation">
        <van-nav-bar class="subClass" left-text="取消" right-text="确认" title="设备类型" @click-left="back"  @click-right="selDeviceTypeBtn"></van-nav-bar>
        </van-nav-bar>
      <van-search v-model.trim="selName" clearable @clear="cancel" @input="focus" shape="round" background="#fff" placeholder="请输入设备类型名称">
        </van-search>
      
        <div style="overflow:auto;height:calc(100% - 120px)">
          <van-cell :border="false"
          v-for="(item,index) in showDeviceTypeList"
          clickable
          :key="index"            
          >
              <div slot="title" style="display: flex;justify-content: space-between;">
                  <span>{{ item.deviceTypeName }}</span>
                  <van-checkbox style="display: inline;" v-model="item.check" checked-color="#057b54"/>
              </div>
          </van-cell>
          <van-cell v-if="showDeviceTypeList.length==0" style="text-align: center;" title="无数据"></van-cell>
        </div>
    </div>
  </template>
  
  <script>
  import {getDeviceTypeList} from "../modules/tour/api/common"
  const PinyinEngine = require('pinyin-engine');
  export default {
    name: 'SelDevice',
    props: {
      subId: {
        type: String,
        default: ""
      },
      devTypeList: {
        type: Array,
        default: function() {
          return [];
        }
      }
    },
    data () {
      return {
        selName: "",
        showDeviceTypeList:[],
        userInfo: {},
        pinyinEngineByShow: null
      }
    },
    computed: {
      
    },
    methods: {
        //关闭组件
        back() {
            this.$emit("close")
        },
        //选择设备类型名称
        selDeviceTypeBtn() {
            var deviceL = [];
            this.showDeviceTypeList.map(item => {
                if(item.check) {
                    deviceL.push(item)
                }
            })
            if(deviceL.length == 0) {
              this.$Toast("请选择设备类型")
              return;
            } 
            console.log("设备类型",deviceL)
            this.$emit("deviceType",deviceL)
        },
        cancel() {
          this.showDeviceTypeList = this.pinyinEngineByShow.query("")
        },
        focus() {
          this.showDeviceTypeList = this.pinyinEngineByShow.query(this.selName)
        },
        /**
         * @description: 查询设备类型
         * @param {*}
         * @return {*}
         */
        queryDeviceType() {
          var self = this;
          var params = {
            subId: this.subId,//变电站id
            roleCode: "",
            userId: this.userInfo.userId,
          };
          console.log("params",params)
          this.$Toast.loading({
              duration: 0,//展示时长 0不会消失
              message: "正在获取设备类型...",
              forbidClick: true,//是否禁止背景点击
              overlay: true//是否显示背景遮罩层
            })
          //编辑页面
          getDeviceTypeList(params).then(data => {
            self.$Toast.clear();
            if(data.success) {
              self.$Toast.success(data.msg)
              var selDevice = data.data;
              if(selDevice && selDevice.length > 0) {
                selDevice.forEach(item => {
                  item["check"] = false;
                })
                self.showDeviceTypeList = selDevice;
                self.pinyinEngineByShow = new PinyinEngine(selDevice, ["deviceTypeName","deviceTypeId"])
              }else{
                self.showDeviceTypeList = [];
              }
            }else{
              self.$Toast.fail(data.msg)
            }
          }).catch(err => {
            self.$Toast.fail(err)
          })
        },
        /**
         * @description: 回显选中设备类型
         * @param {*}
         * @return {*}
         */
        showSelDeviceType() {
            var arr = this.devTypeList.map(item => item.deviceTypeId);
            this.showDeviceTypeList.forEach(item => {
              if(arr.indexOf(item.deviceTypeId) != -1){
                item["check"] = true;
              }else{
                item["check"] = false;
              }
            })
        }
    },   
    watch: {
      devTypeList(newValue, odlValue) {
        this.showSelDeviceType();
      },
    },
    mounted() {
      var userInfo = localStorage.getItem("userInfo");
			this.userInfo = JSON.parse(userInfo);
      this.queryDeviceType()
    }
  }
  </script>
  
  <style scoped>
  .selectSubstation {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  .tabList {
    width:100%;
    height:90%;
    overflow-y:auto;
  }
  .van-nav-bar {
    z-index: 10;
    background: linear-gradient(to right, #036257, #057b54);
  }
  /deep/ .van-nav-bar__title {
    color: #fff !important;
    font-size: 20px !important;
  }
  /deep/ .van-nav-bar__text, .van-nav-bar .van-icon {
    color: #fff !important;
    font-size: 16px !important;
  }
  </style>
  